<template>
  <!--  微课堂首页头部-->
  <div class="front-header-content">
    <div class="front-header-content-left">
      <h3 @click="toHomePage" style="color: deepskyblue">微课堂</h3>
    </div>

    <div class="navbar-user" style="display: flex">
      <div style="width: 200px; height: 40px; margin-right: 20px">
        <el-input
          v-model="input2"
          class="w-50 m-2"
          placeholder="Please Input"
          :suffix-icon="Search"
        />
      </div>
      <div>
        <ul class="" style="padding-right: 50px; display: flex">
          <el-link type="primary" style="margin-right: 30px" @click="toLogin"
            >登录</el-link
          >
          <el-link type="primary" @click="toRegister">注册</el-link>
        </ul>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
const input2 = ref("");

export default {
  name: "Header",
  methods: {
    toHomePage() {
      this.$router.push({ path: "/" });
    },
    toLogin() {
      this.$router.push({ path: "/login" });
    },
    toRegister() {
      this.$router.push({ path: "/register" });
    },
  },
  setup() {
    return {
      ref,
      Search,
    };
  },
};
</script>

<style scoped></style>
